<template>
  <div class="addSubject">
    <!--图片-->
    <div class="urlBox">
      <div class="text">
        课程封面URL：
      </div>
      <div class="input">
        <Input
          prefix="ios-send"
          v-model="coverUrl"
          placeholder="输入课程封面 URL"/>
      </div>
    </div>

    <!--上传图片-->
    <div class="inputBox">
      <div class="style" @click="uploadFile">
        <!--图片样式-->
        <img src="../../assets/home/upload.png">
        <br>
        点我上传 【654 × 360】
      </div>

      <!--图片预览-->
      <div class="preview">
        <img :src="fileInfo.fileUrl">
      </div>
    </div>


    <!--课程信息-->
    <div class="infoBox">
      <!--文字-->
      <div class="left">
        <div class="text">标题 &nbsp;:</div>
        <div class="text">课时 &nbsp;:</div>
        <div class="text">vip &nbsp;:</div>
        <div class="text">评分 &nbsp;:</div>
        <div class="text">老师 &nbsp;:</div>
        <div class="text">qq群 &nbsp;:</div>
        <div class="text">简介 &nbsp;:</div>
      </div>

      <!--输入框 选择按钮-->
      <div class="right">
        <!--标题输入框-->
        <div class="text title">
          <Input
            prefix="ios-paper"
            style="width: 700px"
            v-model="subjectInfo.title"
            placeholder="输入课程标题"/>
        </div>
        <!--课时-->
        <div class="text total">
          <span>0</span>
        </div>
        <!--vip-->
        <div class="text vip">
          <RadioGroup v-model="vipFlag">
            <Radio label="是"></Radio>
            <Radio label="否"></Radio>
          </RadioGroup>
          <span style="margin-left: 50px;font-size: 14px;color: #FF0000">
            是：会员课程 &nbsp;&nbsp;&nbsp;&nbsp; 否：非会员课程
          </span>
        </div>
        <!--评分-->
        <div class="text score">
          <Input
            prefix="md-thumbs-up"
            style="width: 150px"
            v-model="subjectInfo.score"
            placeholder="课程初始评分"/>
          <span style="margin-left: 20px">0 - 5 分</span>
        </div>
        <!--老师-->
        <div class="text teacher">
          <div v-for="(obj,i) in teacher" style="display: inline-block">
            <Button size="small" type="error" @click="delTeacher(i)">×</Button>
            <Input
              style="width: 80px;margin-right: 30px;"
              v-model="teacher[i]"
              placeholder="老师姓名"/>
          </div>
          <Button size="small" type="info" @click="addTeacher">+</Button>
        </div>

        <!--QQ群-->
        <div class="text qqGroup">
          <div v-for="(obj,i) in qqGroup" style="display: inline-block">
            <Button size="small" type="error" @click="delQQGroup(i)">×</Button>
            <Input
              style="width: 100px;margin-right: 30px;"
              v-model="qqGroup[i]"
              placeholder="QQ群"/>
          </div>
          <Button size="small" type="info" @click="addQQGroup">+</Button>
        </div>

        <!--简介-->
        <div class="text introduction">
          <Input
            clearble
            v-model="subjectInfo.introduction"
            maxlength="200"
            type="textarea"
            :autosize="{minRows: 3}"
            show-word-limit/>
        </div>
      </div>
    </div>
    <!--保存-->
    <div class="submit">
      <Button size="default" type="success" @click="insertSubject">保存</Button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    data() {
      return {
        //封面URL
        coverUrl: "",
        //是否vip
        vipFlag: "否",
        //老师
        teacher: [],
        //qq群
        qqGroup: [],
        //课程信息
        subjectInfo: {
          //标题
          title: "",
          //课时统计
          total: 0,
          //vip
          vip: "",
          //得分
          score: 5.0,
          //老师
          teachers: "",
          //qq群
          qqGroups: "",
          //简介
          introduction: "",
        },
        //文件信息
        fileInfo: {
          file: Object,
          fileUrl: this.coverUrl,
          resp: Object
        }
      }
    },
    methods: {
      //上传文件，调用File组件
      uploadFile: function () {
        this.Bus.$emit("my-event-file-upload", {
          fromComponent: "addSubject"
        })
      },
      //添加老师
      addTeacher: function () {
        let length = this.teacher.length;
        this.$set(this.teacher, length, "")
      },
      //删除老师
      delTeacher: function (index) {
        this.teacher.splice(index, 1)
      },
      //添加qq群
      addQQGroup: function () {
        let length = this.qqGroup.length;
        this.$set(this.qqGroup, length, "")
      },
      //删除qq群
      delQQGroup: function (index) {
        this.qqGroup.splice(index, 1)
      },
      //校验标题
      checkTitle: function () {
        if (this.subjectInfo.title.trim() == "") {
          this.$Notice.warning({
            title: "标题不能为空"
          })
          return false
        }
        if (this.subjectInfo.title.trim().length > 20) {
          this.$Notice.warning({
            title: "标题过长",
            desc: "标题请控制在20个字符以内"
          })
          return false
        }
        return true
      },
      //设置值
      setVip: function () {
        if (this.vipFlag == "否") {
          this.subjectInfo.vip = 0
        } else if (this.vipFlag == "是") {
          this.subjectInfo.vip = 1
        }
      },
      //校验评分
      checkScore: function () {
        if (this.subjectInfo.score == "") {
          this.subjectInfo.score = 5.0
        }
        return true
      },
      //设置老师
      setTeacher: function () {
        if (this.teacher.length == 0) {
          this.$Notice.warning({
            title: "至少添加一位老师"
          })
          return false
        }
        let teachers = ""
        for (let i = 0; i < this.teacher.length; i++) {
          teachers += this.teacher[i];
          teachers += ",";
        }
        teachers = teachers.substring(0, teachers.length - 1);
        this.subjectInfo.teachers = teachers
      },
      //设置QQ群
      setQQGroup: function () {
        let qqGroups = ""
        for (let i = 0; i < this.qqGroup.length; i++) {
          qqGroups += this.qqGroup[i];
          qqGroups += ",";
        }
        qqGroups = qqGroups.substring(0, qqGroups.length - 1);
        this.subjectInfo.qqGroups = qqGroups
      },
      //校验简介
      checkIntroduction: function () {
        if (this.subjectInfo.introduction.trim() == "") {
          this.$Notice.warning({
            title: "简介不能为空"
          })
          return false
        }
        return true
      },
      //保存课程
      insertSubject: function () {
        let b1 = this.checkTitle();
        this.setVip();
        let b2 = this.checkScore();
        this.setTeacher();
        this.setQQGroup();
        let b3 = this.checkIntroduction();
        if (!b1 || !b2 || !b3) {
          return false
        }

        let data = {
          subjectName: this.subjectInfo.title,
          subjectDetails: {
            subPic: this.coverUrl,
            subTotal: 0,
            subScore: this.subjectInfo.score,
            vip: this.subjectInfo.vip,
            subTeacher: this.subjectInfo.teachers,
            qqGroup: this.subjectInfo.qqGroups,
            subIntroduction: this.subjectInfo.introduction,
          }
        }
        this.axios.post(`/course/subject/subject`, data)
          .then((resp) => {
            if (resp.data.flag) {
              //提示
              this.$Notice.success({
                title: "课程添加成功"
              })
              //跳转
              this.$router.push("/subject")
            }
          })
      }
    },
    mounted() {
      //文件上传，监听回传
      this.Bus.$on("my-event-file-addSubject", (data) => {
        this.fileInfo.file = data.file
        this.fileInfo.fileUrl = data.fileUrl
        this.fileInfo.resp = data.resp
        //如果上传成功，输入框URL默认填充网络URL
        this.coverUrl = this.fileInfo.fileUrl
      })
    }
  }
</script>

<style scoped>
  .addSubject {
    width: 98%;
    margin: 20px auto;
  }


  .addSubject .urlBox {
    overflow: hidden;
    margin-top: 30px;
  }

  /*课程封面URL文字*/
  .addSubject .urlBox .text {
    width: 112px;
    margin-left: 15px;
    height: 34px;
    line-height: 34px;
    text-align: left;
    float: left;
  }

  /*课程封面URL输入框*/
  .addSubject .urlBox .input {
    width: 1098px;
    margin-left: 5px;
    float: left;
  }

  .addSubject .inputBox {
    overflow: hidden;
  }

  /*封面上传*/
  .addSubject .inputBox .style {
    margin: 20px 0px 20px 15px;
    width: 300px;
    height: 120px;
    border: 1px dotted #3399FF;
    border-radius: 6px;
    font-size: 16px;
    color: #FF0000;
    text-align: center;
    float: left;
  }

  /*预览*/
  .addSubject .inputBox .preview {
    margin: 20px 10px 20px 10px;
    width: 300px;
    height: 120px;
    border-radius: 6px;
    float: right;
  }

  /*img属性*/
  .addSubject .inputBox .preview img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
  }

  /*上传图片样式*/
  .addSubject .inputBox .style img {
    display: block;
    width: 50px;
    height: 50px;
    margin: 5px auto 0px;
  }

  /**/
  .addSubject .infoBox {
    margin-left: 10px;
    overflow: hidden;
  }

  /*左侧盒子*/
  .addSubject .infoBox .left {
    float: left;
  }

  /*文字*/
  .addSubject .infoBox .left .text {
    width: 60px;
    height: 30px;
    margin-top: 20px;
    line-height: 30px;
    font-size: 18px;
    text-align: right;
  }

  .addSubject .infoBox .right {
    float: left;
    margin-left: 20px;
  }

  /*标题*/
  .addSubject .infoBox .right .title {
    margin-top: 20px;
  }

  /*课时*/
  .addSubject .infoBox .right .total {
    margin-top: 22px;
  }

  /**/
  .addSubject .infoBox .right .total span {
    color: #FF0000;
    font-size: 18px;
  }

  /*vip单选*/
  .addSubject .infoBox .right .vip {
    margin-top: 22px;
  }

  /*vip单选*/
  .addSubject .infoBox .right .score {
    margin-top: 23px;
  }

  /*老师*/
  .addSubject .infoBox .right .teacher {
    height: 34px;
    margin-top: 20px;
  }

  /*qq群*/
  .addSubject .infoBox .right .qqGroup {
    height: 34px;
    margin-top: 18px;
  }

  /*简介*/
  .addSubject .infoBox .right .introduction {
    margin-top: 14px;
  }

  /*保存按钮*/
  .addSubject .submit {
    margin-top: 14px;
    margin-left: 10px;
  }
</style>
